<template>
<!--pages/tools/commonQuery/commonQuery.wxml-->
<view>
  <view class="scolls">
    <view style="padding: 0 40rpx;">
      <scroll-view scroll-x="true" scroll-with-animation="true" :scroll-into-view="toView">
        <block>
          <view class="blockbox">
            <view v-for="(item, index) in allSearch" :key="index" class="flex-col chax" @tap="menuClick" :id="'L'+index" :data-index="index">
              <text :class="menuIndex == index?'seltext':'noseltext'">{{item.name}}</text>
              <view class="line" v-if="menuIndex == index"></view>
            </view>
          </view>
        </block>
      </scroll-view>
    </view>
  </view>

  <view style="margin: 24rpx 40rpx 0 40rpx;">
    <scroll-view scroll-y="true" scroll-with-animation="true" :scroll-into-view="toView1" @scroll="scroll">
      <view class="chaxunHeight" :style="'height:' + (clientHeight-topHeight) + 'px'">
        <view v-for="(all, index) in allSearch" :key="index" class="chaxun-box" :id="'L'+index" :style="'min-height:' + ((index==4)?(clientHeight-topHeight):'') + 'px'">
          <view class="chaxname">{{all.name}}</view>
          <!-- <view class="cx-items-box"> -->
            <view class="cx-items">
              <view v-for="(item, index2) in all.info" :key="index2" class="items flex-col" @tap="navDetail" :data-path="item.path" :data-title="item.title" :data-appid="item.appid">
                <image :src="item.logo" mode></image>
                <text>{{item.stitle}}</text>
              </view>
            </view>
          <!-- </view> -->
        </view>
      </view>
    </scroll-view>
  </view>
</view>
</template>

<script>
// pages/tools/commonQuery/commonQuery.js
const app = getApp();
const util = require("../../../utils/util.js");
var sIndex = "";

export default {
  data() {
    return {
      // allSearch: [{
      //   name: "政务办事",
      //   info: []
      // }, {
      //   name: "教育办事",
      //   info: []
      // }, {
      //   name: "交通出行",
      //   info: []
      // }, {
      //   name: "车辆服务",
      //   info: []
      // }, {
      //   name: "民生服务",
      //   info: []
      // }],
      allSearch: [{
        name: "办事查询",
        info: []
      }, {
        name: "交通查询",
        info: []
      }, {
        name: "教育查询",
        info: []
      }, {
        name: "便民查询",
        info: []
      }],
      count: 0,
      toView: '',
      toView1: '',
      menuIndex: 0,
      tabHeight: [],
      topHeight: "",
      winHeight: "",
      clientHeight: "",
      showtk: false
    };
  },

  components: {},
  props: {},

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    // 获取顶部搜索的距离
    var query = uni.createSelectorQuery();
    query.select('.scolls').boundingClientRect(res => {
      this.setData({
        topHeight: res.height
      });
    }).exec(); // 获取屏幕高度

    uni.getSystemInfo({
      success: res => {
        var clientHeight = res.windowHeight,
            clientWidth = res.windowWidth,
            rpxR = 750 / clientWidth;
        var calc = clientHeight * rpxR;
        this.setData({
          winHeight: calc,
          clientHeight
        });
      }
    });
    util.getUrl(app.globalData.url).then(res => {
      this.allSearch.forEach((v, k) => {
        this.getallSearch(v.name, k);
      });
    });
  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {},
  methods: {
    // 全部查询
    getallSearch(type, index) {
      let toolData = {
        action: "tools",
        city: uni.getStorageSync("city"),
        keywords: "",
        version: app.globalData.version,
        type
      };
      util.request('service.php', toolData).then(res => {
        let resData = res.data.data;
        this.count++;
        this.allSearch[index].info = resData;
        this.setData({
          allSearch: this.allSearch
        });

        if (this.count == this.allSearch.length) {
          this.setData({
            allSearch: this.allSearch
          });
          this.allSearch.forEach((v, k) => {
            var query = uni.createSelectorQuery();
            query.select('#L' + k + '.chaxun-box').boundingClientRect(res => {
              if (res) {
                this.tabHeight.push(res.height);
                this.setData({
                  tabHeight: this.tabHeight
                });
              }
            }).exec();
          });
        }
      });
    },

    menuClick(e) {
      let menuIndex = e.currentTarget.dataset.index;
      this.setData({
        menuIndex,
        toView1: 'L' + menuIndex
      });
    },

    scroll: function (e) {
      let scrollViewTop = e.detail.scrollTop;
      let tabHeight = this.tabHeight;
      var scroArr = [];
      var currNum = 0;
      tabHeight.forEach((item, index) => {
        if (index == 0) {
          scroArr.push(tabHeight[index]);
        } else {
          if (currNum) {
            currNum = tabHeight[index] + currNum;
          } else {
            currNum = tabHeight[index] + tabHeight[index - 1];
          }

          scroArr.push(currNum);
        }
      });
      let lastIndex = tabHeight.length - 1;

      for (let i = 0; i < scroArr.length; i++) {
        if (scrollViewTop >= 0 && scrollViewTop < scroArr[i]) {
          this.setData({
            menuIndex: 0,
            toView: 'L' + 0
          });
          return;
        } else if (scrollViewTop >= scroArr[i] && scrollViewTop < scroArr[i + 1]) {
          this.setData({
            menuIndex: i + 1,
            toView: 'L' + (i + 1)
          });
          return;
        } else if (scrollViewTop >= scroArr[scroArr.length - 1]) {
          this.setData({
            menuIndex: scroArr.length - 1,
            toView: 'L' + (scroArr.length - 1)
          });
          return;
        }
      }
    },

    // 服务点击
    navDetail(e) {
      let path = e.currentTarget.dataset.path;
      let linkname = e.currentTarget.dataset.title;
      let appid = e.currentTarget.dataset.appid;

      if (path.indexOf("pages") == -1 && path.indexOf("mp.weixin.qq.com") == -1) {
        this.setData({
          showtk: true
        });
        util.navContact(linkname, path);
      } else {
        util.navMethod(path, appid);
      }
    }

  }
};
</script>
<style>
/* pages/tools/commonQuery/commonQuery.wxss */

::-webkit-scrollbar {
    width: 0;
    height: 0;
    color: transparent;
}

.flex-row {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.flex-col {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.scolls {
    width: 100%;
    border-bottom: 1px solid #e8e8e8;
    margin-top: 5rpx;
    z-index: 1;
}

.blockbox {
    white-space: nowrap;
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: nowrap;
}

.chax {
    margin-right: 60rpx;
}

.seltext {
    font-size: 30rpx;
    font-family: PingFang SC, PingFang SC-Medium;
    font-weight: 500;
    color: #242424;
    margin-bottom: 15rpx;
}

.noseltext {
    font-size: 30rpx;
    font-family: PingFang SC, PingFang SC-Medium;
    font-weight: 500;
    color: #828282;
    margin-bottom: 22rpx;
}

.line {
    border: 6rpx solid #f60;
    width: 46rpx;
    border-radius: 40rpx;
}

.chaxun-box {
    margin-bottom: 50rpx;
}

.chaxun-box:last-child {
    margin-bottom: 0;
}

.chaxname {
    font-size: 30rpx;
    font-family: PingFang SC, PingFang SC-Semibold;
    font-weight: bold;
    color: #242424;
}

.res-style {
    margin: 0 40rpx;
}

.cx-items-box {
    display: flex;
    align-items: center;
    justify-content: center;
}

.cx-items {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    /* justify-content: space-between; */
    flex-wrap: wrap;
    /* margin-bottom: 50rpx; */
}


/* .cx-items:after{
    content: '';
    width: 25%;
   
  }

.items{
    width:25%;
    margin-bottom: 20rpx;
    margin-top: 40rpx;
  } */

.items {
    margin-right: 37rpx;
    margin-top: 40rpx;
}

.items:nth-child(4n) {
    margin-right: 0;
}

.items image {
    width: 90rpx;
    height: 90rpx;
}

.items text {
    width: 60px;
    font-size: 24rpx;
    font-family: PingFang SC, PingFang SC-Medium;
    font-weight: 500;
    text-align: center;
    color: #545454;
    margin-top: 15rpx;
}

.text-over {
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-all;
}

@media (min-width: 768px) {
    .items {
        margin-right: 64rpx;
    }
    .items text {
        width: 120rpx;
    }
}

@media (min-width: 950px) {
    .items {
        margin-right: 62rpx;
    }
}

@media (min-width: 1920px) {
    .items {
        margin-right: 62rpx;
    }
}
</style>